<template>
  <div style="padding: 10px">


    <div style="margin: 10px 0">

      <div>

        <el-input v-model="searchId" clearable placeholder="请输入教师编号以搜索" prefix-icon="el-icon-star-on"
                  style="width: 300px;margin-left: 15px"></el-input>

        <el-input v-model="searchName" clearable placeholder="请输入教师名称以搜索" prefix-icon="el-icon-s-flag"
                  style="width: 300px;margin-left: 15px"></el-input>

        <el-button icon="el-icon-search" plain size="large" type="success" @click="load">搜索</el-button>

        <el-button icon="el-icon-search" plain size="large" type="warning" @click="reset">重置</el-button>

      </div>


      <div style="margin: 10px 15px">


        <el-button icon="el-icon-circle-plus" plain size="large" type="primary" @click="addTeacher">新增</el-button>

        <el-popconfirm cancel-button-text="我在想想哈" icon-color="red" title="确定批量删除吗？" @confirm="removeBatchByIds">

          <el-button slot="reference" icon="el-icon-remove-outline" plain size="large" style="margin-left: 10px"
                     type="danger">批量删除

          </el-button>

        </el-popconfirm>


        <el-upload :on-success="importSuccess" :show-file-list="false" action="/teacher/import"
                   style="display: inline-block">

          <el-button icon="el-icon-bottom" plain size="large" style="margin: 0 10px" type="primary">导入</el-button>

        </el-upload>

        <el-button icon="el-icon-top" plain size="large" type="primary" @click="exp">导出</el-button>

      </div>


    </div>


    <!--//弹窗事件-->

    <div>

      <el-dialog id="change" :before-close="addHandleClose" :visible.sync="addDialogFormVisible" title="新增教师"
                 width="25%">


        <el-form ref="form" :model="form" :rules="rules" label-width="70px">


          <el-form-item label="选择学院" prop="departmentName">

            <el-select v-model="form.departmentId" filterable placeholder="请选择">

              <el-option v-for="item in options" :key="item.departmentId" :label="item.departmentName"
                         :value="item.departmentId">

              </el-option>

            </el-select>

          </el-form-item>

          <el-form-item label="教师编号" prop="teacherId">

            <el-input v-model="form.teacherId" placeholder="请输入"></el-input>

          </el-form-item>

          <el-form-item label="姓名" prop="teacherName">

            <el-input v-model="form.teacherName" placeholder="请输入"></el-input>

          </el-form-item>

          <el-form-item label="性别" prop="teacherGender">

            <el-radio v-model="form.teacherGender" label="男">男</el-radio>

            <el-radio v-model="form.teacherGender" label="女">女</el-radio>

          </el-form-item>


          <el-form-item label="联系方式" prop="teacherPhone">

            <el-input v-model="form.teacherPhone" placeholder="请输入"></el-input>

          </el-form-item>


        </el-form>

        <div slot="footer" class="dialog-footer">

          <el-button icon="el-icon-error" plain type="danger" @click="addDialogFormVisible = false">取 消</el-button>

          <el-button icon="el-icon-success" type="success" @click="saveTeacher">确 定</el-button>

        </div>

      </el-dialog>

    </div>

    <!--//弹窗事件2-->

    <div>

      <el-dialog id="change" :before-close="editHandleClose" :visible.sync="editDialogFormVisible" title="编辑专业"
                 width="25%">

        <el-form ref="form" :model="form" :rules="rules" label-width="70px">


          <el-form-item label="选择学院" prop="departmentName">

            <el-select v-model="form.departmentId" filterable placeholder="请选择">

              <el-option v-for="item in options" :key="item.departmentId" :label="item.departmentName"
                         :value="item.departmentId">

              </el-option>

            </el-select>

          </el-form-item>

          <el-form-item label="教师编号" prop="teacherId">

            <el-input v-model="form.teacherId" :disabled="true" placeholder="请输入"></el-input>

          </el-form-item>

          <el-form-item label="姓名" prop="teacherName">

            <el-input v-model="form.teacherName" placeholder="请输入"></el-input>

          </el-form-item>

          <el-form-item label="性别" prop="teacherGender">

            <el-radio v-model="form.teacherGender" label="男">男</el-radio>

            <el-radio v-model="form.teacherGender" label="女">女</el-radio>

          </el-form-item>


          <el-form-item label="联系方式" prop="teacherPhone">

            <el-input v-model="form.teacherPhone" placeholder="请输入"></el-input>

          </el-form-item>


        </el-form>

        <div slot="footer" class="dialog-footer">

          <el-button icon="el-icon-error" plain type="danger" @click="editDialogFormVisible = false">取 消</el-button>

          <el-button icon="el-icon-success" type="success" @click="updateTeacher">确 定</el-button>

        </div>

      </el-dialog>

    </div>


    <!--表格事件-->

    <div class="home" style="margin: 10px">

      <el-table :data="tableData" :row-class-name="tableRowClassName" border header-cell-class-name="headerBg"
                size="medium" style="width: 100%" @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="55">

        </el-table-column>


        <el-table-column label="教师编号" prop="teacherId">

        </el-table-column>

        <el-table-column label="教师姓名" prop="teacherName">

        </el-table-column>


        <el-table-column label="性别" prop="teacherGender">

        </el-table-column>


        <el-table-column label="电话" prop="teacherPhone">

        </el-table-column>


        <el-table-column label="所属学院" prop="departmentName">

        </el-table-column>


        <el-table-column label="操作">

          <template slot-scope="scope">

            <el-button

                icon="el-icon-edit"

                size="small"

                type="success" @click="handleEdit(scope.$index, scope.row)">编辑

            </el-button>

            <el-popconfirm

                cancel-button-text="我在想想哈"

                icon-color="red"

                title="确定删除吗？"

                @confirm="handleDelete(scope.$index, scope.row.teacherId)"

            >

              <el-button slot="reference" icon="el-icon-delete-solid"

                         size="small" style="margin-left: 6px" type="danger">删除

              </el-button>

            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin: 10px 0">
        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[5, 7,10, 20]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

      </div>
    </div>

  </div>
</template>

<script>
import request from '@/utils/request';
export default {
  name: "Class",
  components: {},

  //页面初始方法  调用生命周期
  created() {
    this.load()
  },
  methods: {
    importSuccess() {
      this.$message.success("文件导入成功！")
      this.load()
    },
    exp() {
      // window.open("/department/export")
      location.href = "http://localhost/teacher/export"
    },
    reset() {
      this.searchId = '';
      this.searchName = '';
      this.load()
    },
    removeBatchByIds() {
      // console.log(this.multipleSelection.map(v => v.professionId))
      let ids = this.multipleSelection.map(v => v.teacherId)
      request.delete("/teacher/delbatch/" + ids).then(res => {
        this.$notify({
          title: '成功',
          message: '批量删除成功！',
          type: 'success'
        });
        this.load()
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;

    },

    handleSizeChange(val) {
      this.pageSize = val
      this.load()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
      console.log(`当前页: ${val}`);
    },

    load() {
      // alert("dfd")
      request.get("/teacher/findpage", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          searchId: this.searchId,
          searchName: this.searchName
        }
      }).then(res => {
        this.tableData = res.records
        this.total = res.total
        console.log(res.records)
      })
    },
    handleEdit(index, row) {
      // 编辑前 查询 否则id为空options为空
      this.beforeSaveFindDep()
      this.form = JSON.parse(JSON.stringify(row))
      this.editDialogFormVisible = true

      // console.log(index)
      // this.form.departmentId = ''
      console.log(index, row);
    },
    //新增前对选项卡 学院名的查询
    beforeSaveFindDep() {
      request.get("/profession/finddep").then(res => {
        console.log(res)
        this.options = res
        console.log(this.options)

      })

    },
    //新增
    saveTeacher() {
      {
        request.post("/teacher/save", this.form).then(response => {
          // alert(response)
          // console.log(response)
          if (response) {
            {
              this.searchId = '';
              this.searchName = '';
              this.load()
              this.$message({
                showClose: true,
                message: '恭喜你，添加成功哦~',
                type: 'success'
              });
            }
          } else {
            this.searchId = '';
            this.searchName = '';
            this.load()
            this.$message({
              showClose: true,
              message: '添加失败！',
              type: 'error'
            });
          }

        })
      }
      console.log(this.form.departmentId)
      this.addDialogFormVisible = false

    },


    //修改
    updateTeacher() {
      request.put("/teacher/update", this.form).then(response => {
        if (response.data) {
          {
            this.load()
            this.$message({
              showClose: true,
              message: '恭喜你，修改成功哦~',
              type: 'success'
            });

          }
        }
      })
      this.editDialogFormVisible = false
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex == 0) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    },
    handleDelete(index, id) {
      // console.log(id);
      request.delete("/teacher/delsingle/" + id).then(res => {
        this.$notify({
          title: '成功',
          message: '删除成功！',
          type: 'success'
        });
        this.load()
      })
    },

    addTeacher() {
      this.beforeSaveFindDep()
      this.form = {}
      this.addDialogFormVisible = true
    },

    addHandleClose(done) {
      // this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => {
      //     });
      this.addDialogFormVisible = false
    },
    editHandleClose(done) {
      // this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => {
      //     });
      this.editDialogFormVisible = false
    }
  },
  data() {
    return {
      //为查询出的院系下拉框
      options: [],

      multipleSelection: [],
      tableData: [],
      searchId: '',
      searchName: '',
      pageSize: 7,
      total: 10,
      currentPage: 1,
      visible: false,
      addDialogFormVisible: false,
      editDialogFormVisible: false,
      form: {
        teacherId: '',
        teacherName: '',
        teacherGender: '',
        teacherPhone: '',
        departmentName: '',
        departmentId: ''
      },
      // rules: {
      //
      //   departmentName: [
      //     {required: true, message: '请输入学院名', trigger: 'blur'},
      //     {pattern: /^[\w\u4e00-\u9fa5]+$/, message: '包含特殊字符', trigger: 'blur'},
      //     {pattern: /^[a-zA-Z]+$|^[\u4e00-\u9fa5]+$/, message: '只能全中文或全英文', trigger: 'blur'},
      //
      //   ]
      // },

      // tableData: [{
      //   classId: '4',
      //   departmentName: '发的',
      //   professionName: 'fg4555',
      //   className: 'hg的',
      //   classSeatNumber: '10'
      // }],
    };
  }

}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.headerBg {
  background: #eee !important;
}
</style>
